<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            border: 1px dashed red;
            position: absolute;
            left: 200px;
            top: 500px;
        }
        
        .box2 {
            width: 100px;
            height: 100px;
            border: 1px dashed blue;
            position: absolute;
            left: 1000px;
            top: 300px;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>
<script>
    //抛物线运动：定点抛物线运动。
    //y = a*x*x + b*x +c;(三个未知数：a,b,c  位置：x,y(目标位置和起始位置差值))
    //根据公式的规则：如果起始位置当做原点  c=0
    //公式变化：y = a*x*x + b*x(二个未知数：a,b)
    //a:曲率，抛物线的弧度。浏览器尺寸有限的，值需要自行约定(0.002-0.009)
    //公式变化：已知x,y差值，已知a曲率，求b

    const box1 = document.querySelector('.box1');
    const box2 = document.querySelector('.box2'); //目标点
    let timer = null;
    box1.onclick = function() {
        clearInterval(timer);

        //获取原点位置 - box1起始位置。
        let box1_position = {
            left: box1.offsetLeft,
            top: box1.offsetTop
        };

        let a = 0.002;

        // 最重要的一步，求b,这里的x,y目标位置和起始位置差值.
        // 求差值
        let distance = {
            x: box2.offsetLeft - box1_position.left,
            y: box2.offsetTop - box1_position.top
        }
        let b = (distance.y - a * distance.x * distance.x) / distance.x;
        let x = 0;
        timer = setInterval(() => {
            x += 5;
            if (box1.offsetLeft >= box2.offsetLeft) {
                clearInterval(timer);
            } else {
                box1.style.left = box1_position.left + x + 'px'; //一直向前
                box1.style.top = box1_position.top + a * x * x + b * x + 'px'; //抛物线前进
                let cDiv = document.createElement('div');
                cDiv.style.cssText = `width:5px;height:5px;background:blue;position:absolute;left:${box1.offsetLeft}px;top:${box1.offsetTop}px;`;
                document.body.appendChild(cDiv);
            };
        }, 1000 / 60)
    }
</script>